<template>
  <div class="container">
    <Navigation :Crumbs="Crumbs"></Navigation>
    <div class="box">
      <!-- 策略基础信息 -->
      <div class="info">
        <i class="return  el-icon-close" @click="StrategyList"> </i>
        <div class="title">策略基础信息</div>
        <div class="inputInfo">
          <div>
            <label>策略名称</label>
            <input type="text" placeholder="请输入策略名称" v-model="info.name" />
          </div>
          <div>
            <label>备注</label>
            <input type="text" placeholder="请输入策略描述" v-model="info.memo" />
          </div>
          <div>
            <label>经度</label>
            <input type="text" placeholder="请输入经度" v-model="strategy.config.lng" />
          </div>
          <div>
            <label>纬度</label>
            <input type="text" placeholder="请输入纬度" v-model="strategy.config.lat" />
          </div>
        </div>
      </div>
      <div class="strip">
        <div class="title">第{{itemsIndex+1}}条</div>
        <div class="setStrip">
          <div v-for="(item,index) in strategy.items" :key="index">
            <el-button
              :class="activeClass == index ? 'active':''"
              @click="active(index)"
            >第{{index+1}}条目</el-button>
            <i class="el-icon-circle-close" @click="delStrip(index)"></i>
          </div>
        </div>
      </div>
      <!-- 策略执行方式 -->
      <div class="mode">
        <div class="title">策略执行方式</div>
        <div class="modeInput">
          <ul>
            <li class="day">
              <div class="title" :class="{everydayActive}">
                <el-radio
                  v-model="strategy.items[itemsIndex].dateSpan.type"
                  label="everyday"
                  @change="everyday"
                >每天模式</el-radio>
              </div>
              <div class="border">按天执行</div>
            </li>
            <li class="absolute">
              <div class="title" :class="{daytodayActive}">
                <el-radio
                  v-model="strategy.items[itemsIndex].dateSpan.type"
                  label="daytoday"
                  @change="daytoday"
                >指定时间</el-radio>
              </div>
              <div class="border">
                <div>
                  <span :class="{lableBorder}">开始时间</span>
                  <el-date-picker
                    :disabled="daytodayDis"
                    align="right"
                    value-format="yyyy-MM-dd"
                    v-model="strategy.items[itemsIndex].dateSpan.startDate"
                    type="date"
                    @change="startTimeJudge"
                    placeholder="开始时间"
                  ></el-date-picker>
                </div>
                <div>
                  <span :class="{lableBorder}">结束时间</span>
                  <el-date-picker
                    :disabled="daytodayDis"
                    align="right"
                    value-format="yyyy-MM-dd"
                    v-model="strategy.items[itemsIndex].dateSpan.endDate"
                    type="date"
                    placeholder="结束时间"
                    @change="endTimeJudge"
                  ></el-date-picker>
                </div>
              </div>
            </li>
            <li class="week">
              <div class="title" :class="{weekloopActive}">
                <el-radio
                  v-model="strategy.items[itemsIndex].dateSpan.type"
                  label="weekloop"
                  @change="weekloop"
                >指定星期</el-radio>
              </div>
              <div class="border">
                <div class="AppointedDate">
                  <el-checkbox-group
                    v-model="strategy.items[itemsIndex].dateSpan.weekDays"
                    @change="sss"
                  >
                    <el-checkbox :label="1" :disabled="weekDaysDis">星期一</el-checkbox>
                    <el-checkbox :label="2" :disabled="weekDaysDis">星期二</el-checkbox>
                    <el-checkbox :label="3" :disabled="weekDaysDis">星期三</el-checkbox>
                    <el-checkbox :label="4" :disabled="weekDaysDis">星期四</el-checkbox>
                    <el-checkbox :label="5" :disabled="weekDaysDis">星期五</el-checkbox>
                    <el-checkbox :label="6" :disabled="weekDaysDis">星期六</el-checkbox>
                    <el-checkbox :label="0" :disabled="weekDaysDis">星期日</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 时间点 -->
      <div class="PointOfTime">
        <div class="star">
          <div class="title">开启时间点设置</div>
          <div class="Roll">
            <ul>
              <li v-for="(item,index) in  strategy.items[itemsIndex].onTime.timePts" :key="index">
                <div class="center">
                  <el-select v-model="item.type" placeholder="请选择" @change="tab(item,index)">
                    <el-option
                      v-for="val in timeType"
                      :key="val.type"
                      :label="val.name"
                      :value="val.type"
                    ></el-option>
                  </el-select>
                  <div class="time">
                    <el-time-picker
                      :clearable="false"
                      value-format="HH:mm:ss"
                      v-model="item.time"
                      :placeholder="item.time?'开始时间' :'天文时间'"
                      :disabled="!item.time"
                    ></el-time-picker>
                  </div>
                  <div class="brightness">
                    <span>亮度</span>
                    <el-slider v-model="item.brightness"></el-slider>
                  </div>
                  <div class="bias">
                    <span>偏移时间</span>
                    <input type="text" v-model="item.bias" />
                  </div>
                  <div class="cct">
                    <span>色温</span>
                    <input type="text" v-model="item.cct" />
                    <i
                      class="el-icon-remove-outline"
                      @click="delPointOfTime(item,index,strategy.items[itemsIndex].onTime.timePts)"
                    ></i>
                  </div>
                </div>
              </li>
            </ul>
            <div class="addTime">
              <el-button icon="el-icon-circle-plus-outline" @click="addPointOfTime">新增开启时间点</el-button>
            </div>
          </div>
        </div>
        <div class="end">
          <div class="title">关闭时间点设置</div>
          <div class="Roll">
            <ul>
              <li v-for="(item,index) in  strategy.items[itemsIndex].offTime.timePts" :key="index">
                <div class="center">
                  <el-select v-model="item.type" placeholder="请选择" @change="endTab(item,index)">
                    <el-option
                      v-for="val in timeType"
                      :key="val.type"
                      :label="val.name"
                      :value="val.type"
                    ></el-option>
                  </el-select>
                  <div class="time">
                    <el-time-picker
                      value-format="HH:mm:ss"
                      :clearable="false"
                      v-model="item.time"
                      :placeholder="item.time?'开始时间' :'天文时间'"
                      :disabled="!item.time"
                    ></el-time-picker>
                  </div>
                  <div class="bias">
                    <span>偏移时间</span>
                    <input type="text" v-model="item.bias" />
                    <i
                      class="el-icon-remove-outline"
                      @click="delEndTime(item,index,strategy.items[itemsIndex].offTime.timePts)"
                    ></i>
                  </div>
                </div>
              </li>
            </ul>
            <div class="addTime">
              <el-button icon="el-icon-circle-plus-outline" @click="addEndTime">新增关闭时间点</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 保存以及添加条目 -->
      <div class="footer">
        <el-button @click="addStrip">添加条目</el-button>
        <el-button @click="Preservation">保存</el-button>
        <el-button @click="show">json编辑</el-button>
      </div>
    </div>
    <!-- json添加策略 -->
    <div class="mark" v-show="jsonShow">
      <div class="content">
        <i class="el-icon-close" @click="colse"></i>
        <div class="josn">
          <json-viewer :value="json" boxed copyable :expand-depth="1"></json-viewer>
        </div>
        <div class="txt">
          <div>
            <lable>策略名称</lable>
            <input type="text" placeholder="请输入策略的名称" v-model="txtJson.name" />
          </div>
          <div>
            <lable>策略描述</lable>
            <input type="text" placeholder="请输入策略的描述" v-model="txtJson.memo" />
          </div>
          <el-input
            type="textarea"
            rows="30"
            v-model="txtJson.appointment"
            placeholder="请输入json类型策略"
          ></el-input>
          <div class="block">
            <el-button @click="addJson">保存策略</el-button>
            <el-button @click="check">校验</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/views/title.vue";
import Vue from "vue";
import JsonViewer from "vue-json-viewer";
Vue.use(JsonViewer);
export default {
  components: {
    Navigation
  },
  data() {
    return {
      activeClass: 0,
      LongitudeAndLatitude: false, //经纬度显示隐藏
      Crumbs: {
        router: [],
        path: ["策略管理", "策略编辑"]
      },
      type: "",
      startDate: "",
      endDate: "",
      weekDays: [],
      type: "sunrise",
      time: "",
      brightness: "",
      bias: "",
      cct: "",
      timeType: [
        {
          type: "sunrise",
          name: "日出"
        },
        {
          type: "sunset",
          name: "日落"
        },
        {
          type: "absolute",
          name: "自定义"
        }
      ],
      info: {
        name: "",
        memo: "",
        appointment: "",
        imcType:0,
      },
      itemsIndex: 0,
      strategy: {
        config: {
          lng: "",
          lat: ""
        },
        items: [
          {
            dateSpan: {
              //每天
              type: " ",
              startDate: "",
              endDate: "",
              weekDays: []
            },
            onTime: {
              timePts: [
                {
                  type: "absolute", //指定时间
                  time: "00:00:00",
                  brightness: 80,
                  bias: 0,
                  cct: 5300
                }
              ]
            },
            offTime: {
              timePts: [
                // {
                //   type: "", //指定时间
                //   time: "",
                //   bias: 0
                // }
              ]
            }
          }
        ]
      },
      weekDaysDis: true, //星期启用禁用
      daytodayDis: true, //指定时间启用禁用
      everydayActive: true, //选中每天的样式
      daytodayActive: true, //选中指定时间的样式
      weekloopActive: true, //选中星期的样式
      endBorder: true, //结束时间边框样式
      lableBorder: true, //开始时间边框样式
      txtJson: {
        name: "",
        memo: "",
        appointment: '',
        imcType:0,
      }, //json策略
      jsonShow: false,
      json: {},
      jsonData:{}
    };
  },
  watch:{
      strategy:{
        deep:true,
            handler(a,b){
                if (this.strategy.items[this.itemsIndex].dateSpan.type == "everyday") {
                this.everydayFun();
              } else if (
                this.strategy.items[this.itemsIndex].dateSpan.type == "daytoday"
              ) {
                this.daytodayFun();
              } else if (
                this.strategy.items[this.itemsIndex].dateSpan.type == "weekloop"
              ) {
                this.weekloopFun();
              }else{
                  this.weekDaysDis = true;
                  this.daytodayDis = true;
                  this.everydayActive = true; //选中指定时间的样式
                  this.daytodayActive = true;
                  this.weekloopActive = true;
              }
            }
        }
  },
  created() {
    this.getItemsTrategy();
    this.Jsontxt();
  },
  methods: {
    StrategyList() {
      this.$router.go(-1)
    },
    // json校验
    check() {
            if(this.txtJson.appointment.length>0){
               var json =  this.txtJson.appointment
                this.json = JSON.parse(json);
            }
    },
    // 打开josn录入窗口
    show() {
      this.jsonShow = true;
    },
    // 关闭josn录入窗口
    colse() {
      this.jsonShow = false;
    },
    // 获取修改json字符串
    Jsontxt() {
      if (sessionStorage.getItem("strategy")) {
        var strategy = JSON.parse(sessionStorage.getItem("strategy"));
        this.txtJson.name = strategy.name;
        this.txtJson.memo = strategy.memo;
        this.txtJson.id = strategy.id;
        this.txtJson.appointment = strategy.appointment;
        this.json = JSON.parse(strategy.appointment);
      }
    },
    // json添加策略
    addJson() {
      if (sessionStorage.getItem("strategy")) {
        this.$http
          .put("/api/threesuns/appointment/update", this.txtJson)
          .then(res => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              // this.$router.push("/strategy");
              this.$router.go(-1)

            } else {
              this.$message.warning(res.data.message);
            }
          });
      }
      this.$http
        .post("/api/threesuns/appointment/create", this.txtJson)
        .then(res => {
          if (res.data.data.code == "200") {
            this.$message.success(res.data.data.message);
            this.router.push("/strategy");
          } else {
            this.$message.warning(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改策略取出来传来的策略
    getItemsTrategy() {
      if (sessionStorage.getItem("strategy")) {
        var strategy = JSON.parse(sessionStorage.getItem("strategy"));
        this.strategy = JSON.parse(strategy.appointment);
        for (var i = 0; i < this.strategy.items.length; i++) {
          if (!this.strategy.items[i].offTime) {
            this.strategy.items[i].offTime = {
              timePts: [
              ]
            };
          }
        }
        this.info.name = strategy.name;
        this.info.memo = strategy.memo;
        this.info.id = strategy.id;
        // if (this.strategy.items[this.itemsIndex].dateSpan.type == "everyday") {
        //   this.everydayFun();
        // } else if (
        //   this.strategy.items[this.itemsIndex].dateSpan.type == "daytoday"
        // ) {
        //   this.daytodayFun();
        // } else if (
        //   this.strategy.items[this.itemsIndex].dateSpan.type == "weekloop"
        // ) {
        //   this.weekloopFun();
        // } else {
        //   this.weekDaysDis = true;
        //   this.daytodayDis = true;
        //   this.everydayActive = true; //选中指定时间的样式
        //   this.daytodayActive = true;
        //   this.weekloopActive = true;
        // }
      }
    },
    // 判断开始时间是否大于结束时间
    startTimeJudge(e) {
      this.TimeJudgement()
    },
    // 判断开始时间是否大于结束时间
    endTimeJudge(e) {
         this.TimeJudgement()
    },
    // 策略执行方式开始时间和结束时间判断
    TimeJudgement(){
      if (
        this.strategy.items[this.itemsIndex].dateSpan.startDate &&
        this.strategy.items[this.itemsIndex].dateSpan.endDate
      ) {
        let oDate1 = new Date(
          this.strategy.items[this.itemsIndex].dateSpan.startDate
        );
        let oDate2 = new Date(
          this.strategy.items[this.itemsIndex].dateSpan.endDate
        );
        if (oDate1.getTime() > oDate2.getTime()) {
          this.strategy.items[this.itemsIndex].dateSpan.startDate = "";
          this.strategy.items[this.itemsIndex].dateSpan.endDate = "";
          this.$message.warning("请输入正确的时间");
        }
      }
    },
    // 切换开始时间类型切换
    tab(val, index) {
      if (val.type != "absolute") {
        delete val.time;
      } else {
        this.$set(val, "time", "00:00:00");
      }
    },
    // 删除开始时间点
    delPointOfTime(val, index, obj) {
      if (obj.length == 1) {
        this.$message.warning("至少保留一个开启时间点");
        return;
      }

      obj.splice(index, 1);
    },
    // 添加开始时间点
    addPointOfTime() {
      this.strategy.items[this.itemsIndex].onTime.timePts.push({
        type: "absolute", //指定时间
        time: "00:00:00",
        brightness: 80,
        bias: 0,
        cct: 5300
      });
    },
    // 结束时间点类型切换
    endTab(val, index) {
      if (val.type != "absolute") {
        delete val.time;
      } else {
        this.$set(val, "time", "00:00:00");
      }
    },
    // 添加关闭时间点
    addEndTime() {
      // console.log(this.strategy.items[this.itemsIndex].offTime);
      // if()

      this.strategy.items[this.itemsIndex].offTime.timePts.push({
        type: "absolute", //指定时间
        time: "06:00:00",
        bias: 0
      });
    },
    // 删除关闭时间点
    delEndTime(val, index, obj) {
      obj.splice(index, 1);
    },
    // 各种判断
    judge() {
      if (
        this.strategy.items[this.itemsIndex].dateSpan.type.trim().length <= 0
      ) {
        return 1;
      }
      if (this.strategy.items[this.itemsIndex].dateSpan.type == "daytoday") {
        if (
          this.strategy.items[this.itemsIndex].dateSpan.startDate.trim()
            .length <= 0 ||
          this.strategy.items[this.itemsIndex].dateSpan.endDate.trim().length <=
            0
        ) {
          // this.$message.warning("请选择开始日期和结束日期");
          return 2;
        }
      }
      if (
        this.strategy.items[this.itemsIndex].dateSpan.type == "weekloop"
      ) {
        if (
          this.strategy.items[this.itemsIndex].dateSpan.weekDays.length==0
        ) {
          return 3;
        }
      }
    },
    // 添加条目
    addStrip() {
      if (this.judge() == 1) {
        this.$message.warning("请选择执行方式");
        return;
      } else if (this.judge() == 2) {
        this.$message.warning("请选择开始日期和结束日期");
        return;
      } else if (this.judge() == 3) {
        this.$message.warning("请选择执行的星期");
        return;
      }
      this.strategy.items.push({
        dateSpan: {
          //每天
          type: "",
          startDate: "",
          endDate: "",
          weekDays: []
        },
        onTime: {
          timePts: [
            {
              type: "absolute", //指定时间
              time: "00:00:00",
              brightness: 100,
              bias: 0,
              cct: 5300
            }
          ]
        },
        offTime: {
          timePts: [

          ]
        }
      });
      this.itemsIndex = this.strategy.items.length - 1;
      this.activeClass = this.strategy.items.length - 1;
      (this.everydayActive = true),
        (this.daytodayActive = true),
        (this.weekloopActive = true);
      this.lableBorder = true;
    },
    // 删除条目
    delStrip(index) {
      if (this.itemsIndex != index) {
        this.$message.warning("请在当前条目下删除");
        return;
      }
      if (this.strategy.items.length <= 1) {
        this.$message.warning("至少保留一个条目，如要删除请返回策略列表");
        return;
      }
      this.strategy.items.splice(index, 1);
      this.itemsIndex = this.strategy.items.length - 1;
      this.activeClass =  this.itemsIndex;
    },
    // 切换条目
    active(index) {
      this.activeClass = index;
      this.itemsIndex = index;
      if (this.strategy.items[this.itemsIndex].dateSpan.type == "everyday") {
        this.everydayFun();
      } else if (
        this.strategy.items[this.itemsIndex].dateSpan.type == "daytoday"
      ) {
        this.daytodayFun();
      } else if (
        this.strategy.items[this.itemsIndex].dateSpan.type == "weekloop"
      ) {
        this.weekloopFun();
      } else {
        this.weekDaysDis = true;
        this.daytodayDis = true;
        this.everydayActive = true; //选中指定时间的样式
        this.daytodayActive = true;
        this.weekloopActive = true;
      }
    },
    // 每天的样式和禁用
    everydayFun() {
      this.weekDaysDis = true;
      this.daytodayDis = true;
      (this.everydayActive = false),
        (this.daytodayActive = true),
        (this.weekloopActive = true);
      this.lableBorder = true;
    },
    // 每天的类型切换
    everyday() {
      this.strategy.items[this.itemsIndex].dateSpan.startDate = "";
      this.strategy.items[this.itemsIndex].dateSpan.endDate = "";
      this.strategy.items[this.itemsIndex].dateSpan.weekDays = [];
      // this.everydayFun();
    },
    //  指定时间样式和禁用
    daytodayFun() {
      this.daytodayDis = false;
      this.weekDaysDis = true;
      this.everydayActive = true;
      this.daytodayActive = false;
      this.weekloopActive = true;
      this.lableBorder = false;
    },
    // 指定时间类型切换
    daytoday() {
      this.strategy.items[this.itemsIndex].dateSpan.weekDays = [];
      this.strategy.items[this.itemsIndex].dateSpan.startDate = "";
      this.strategy.items[this.itemsIndex].dateSpan.endDate = "";
      // this.daytodayFun();
    },
    //  指定星期的样式禁用
    weekloopFun() {
      this.daytodayDis = true;
      this.weekDaysDis = false;
      (this.everydayActive = true),
        (this.daytodayActive = true),
        (this.weekloopActive = false);
      this.lableBorder = true;
    },
    //  指定星期切换
    weekloop() {
      this.strategy.items[this.itemsIndex].dateSpan.startDate = "";
      this.strategy.items[this.itemsIndex].dateSpan.endDate = "";
      // this.weekloopFun();
    },
    // 可视化添加以及修改策略
    Preservation() {
      if (this.judge() == 1) {
        this.$message.warning("请选择执行方式");
        return;
      } else if (this.judge() == 2) {
        this.$message.warning("请选择开始日期和结束日期");
        return;
      } else if (this.judge() == 2) {
        this.$message.warning("请选择执行的星期");
        return;
      } else if (this.info.name.trim().length <= 0) {
        this.$message.warning("请输入策略名称");
        return;
      }

      var strategyStr = JSON.stringify(this.strategy);
      this.info.appointment = strategyStr;
      if (sessionStorage.getItem("strategy")) {
        this.$http
          .put("/api/threesuns/appointment/update", this.info)
          .then(res => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              // this.$router.push("/strategy");
              this.$router.go(-1)

            } else {
              this.$message.warning(res.data.message);
            }
          });
      } else {
        this.$http
          .post("/api/threesuns/appointment/create", this.info)
          .then(res => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              // this.$router.push("/strategy");
              this.$router.go(-1)

            } else {
              this.$message.warning(res.data.message);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem("strategy");
  }
};
</script>
<style scoped>
.container {
  width:100%;
  height: 100%;
  color: #fff;
  position: relative;
  min-width: 1400px;
}
.box {
  width: 1365px;
  margin: 0 auto;
  margin-top: 50px;
}
.title {
  background-color: #1c8782;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 26px;
}
.inputInfo {
  padding: 8px 0 10px 0;
  background: #011615;
  box-shadow: -1px -4px 13px 9px inset #103437;
  border: 1px solid #fff;
  display: flex;
  justify-content: space-around;
}
.inputInfo input {
  width: 198px;
  background: none;
  border: 1px solid #fff;
  height: 29px;
  margin-left: 30px;
  outline: none;
  color: #fff;
  text-align: center;
}
.info {
  position: relative;
}
.return {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -40px;
  line-height: 30px;
  text-align: center;
  background: #1c8782;
  border-radius: 4px;
}
/* 第几条策略 */
.strip {
  margin-top: 20px;
  height: 107px;
}
.setTitle {
  height: 40px;
  line-height: 40px;
  background: #1c8782;
}

.setStrip {
  height: 51px;
  border: 1px solid #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px -3px 9px -3px #0dc2c3 inset;
}
.setStrip div {
  position: relative;
}
.setStrip i {
  position: absolute;
  top: -9px;
  right: 4px;
}
.el-icon-circle-close {
  color: red;
  font-size: 20px;
}
i:hover {
  cursor: pointer;
}
/* 策略执行方式 */
.mode {
  margin-top: 8px;

  border: 1px solid #fff;
}
.modeInput {
  height: 180px;
  box-shadow: 0px -5px 29px -5px #0dc2c3 inset;
  background: #011615;
  overflow: hidden;
}
.modeInput ul {
  width: 1322px;
  height: 158px;
  margin: 12px auto;
  border: 1px solid #ffffff;
}
.modeInput .title {
  line-height: 35px;
}

.modeInput li {
  float: left;
  border-right: 1px solid #fff;
}
.day {
  width: 234px;
}
.absolute {
  width: 459px;
}
li.week {
  width: 627px;
  border-right: none;
}
.el-radio {
  color: #fff;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #fff;
  background: none;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background: none;
}
.el-checkbox {
  color: #fff;
}
/deep/ ..el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #ccc;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  background: #ccc;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #ccc;
}
/deep/  .el-radio__input.is-checked .el-radio__inner {
  border: none;
}
/deep/ .el-radio__inner::after {
      background: none;
}
.border {
  height: 115px;
  border-top: 1px solid #fff;
}
.day .border {
  text-align: center;
  line-height: 115px;
}

/* 日期 */
.el-input--suffix /deep/ .el-input__inner {
  padding-right: 0;
  padding-left: 110px;
  height: 26px;
  line-height: 26px;
  border-radius: 0;
  background: none;
  color: #fff;
}
/deep/ .el-date-editor.el-input {
  width: 300px;
  border-radius: 0;
}

/deep/ .el-input__icon {
  line-height: 26px;
}
.absolute .border {
  box-sizing: border-box;
  padding-top: 13px;
  text-align: center;
  line-height: 43px;
}
.absolute .border span {
  border: 1px solid #fff;
  padding: 2px 19px;
  vertical-align: bottom;
  font-size: 14px;
}
.el-checkbox {
  width: 208px;
  height: 38px;
  line-height: 38px;
  margin-right: 0;
  text-align: center;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.el-checkbox:nth-child(3n + 3) {
  width: 209px;

  border-right: none;
}
.el-checkbox:last-child {
  border-bottom: none;
}

/* 时间点 */
.PointOfTime {
  display: flex;
  margin-top: 20px;
}
.PointOfTime /deep/ .el-input__inner {
  width: 108px;
  height: 26px;
  border-radius: 0;
  background: #011615;
  color: #fff;
  padding-left: 30px;
}
.PointOfTime .el-input {
  width: 107px;
}
.star {
  width: 829px;
  overflow: hidden;
}

.star ul {
  width: 900px;
  overflow-y: scroll;
  height: 240px;
}
.star .center {
  padding-left: 20px;
}
.Roll {
  width: 827px;
  height: 300px;
  background: #011615;
  border: 1px solid #ffffff;
  overflow: hidden;
  box-shadow: 0px -5px 29px -5px #0dc2c3 inset;
}
.center {
  width: 90%;
  height: 28px;
  margin: auto;
  padding-top: 15px;
  display: flex;
  position: relative;
}
/deep/ .el-select {
  padding-top: 3px;
}
.time {
  padding-top: 3px;
  margin-left: 10px;
}
.brightness {
  margin-left: 10px;
  vertical-align: middle;
  line-height: 30px;
}
/deep/ .el-slider__runway {
  width: 117px;
}
/deep/ .el-slider__button {
  width: 8px;
  height: 8px;
}
/deep/ .el-slider__runway {
  height: 3px;
}
/deep/ .el-slider__bar {
  height: 3px;
}
/deep/ .el-slider {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
/deep/ .el-slider__button-wrapper {
  top: -17px;
}
/deep/ .el-input__suffix {
  right: 0px;
}
.bias,
.cct {
  margin-left: 14px;
  padding-top: 3px;
}
.el-icon-remove-outline {
  margin-left: 10px;
}
.center input {
  width: 78px;
  margin-left: 5px;
  background: none;
  outline: none;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  height: 26px;
}
.addTime {
  text-align: center;
}
.end {
  width: 520px;
  margin-left: 16px;
}
.end ul {
  width: 540px;
  height: 240px;
  overflow-y: scroll;
}
.end .Roll {
  width: 518px;
  border: 1px solid #fff;
}
.end ul li {
  display: flex;
  padding-left: 35px;
}
/* 底部 */
.footer {
  margin-top: 15px;
  text-align: center;
}
/deep/ .el-button {
  padding: 7px 13px;
  background: #011615;
  color: #fff;
  margin-right: 15px;
}
.active {
  background: #0dc2c3;
}
.footer /deep/ .el-button {
  background-color: #1d938d;
}

.everydayActive,
.daytodayActive,
.weekloopActive {
  background: rgba(0, 0, 0, 0);
}
.absolute .el-input--suffix /deep/ .el-input__inner {
  color: #ffffff;
}
.absolute .el-input.is-disabled /deep/ .el-input__inner {
  border: 1px solid #c0c4cc;
}
.endBorder,
.lableBorder {
  border: 1px solid #ccc !important;
  color: #ccc !important;
}
.mark {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  z-index: 99999;
}
/deep/ .el-checkbox+.el-checkbox {
  margin-left: 0;
}
.content {
  width: 1365px;
  margin: auto;
  position: relative;
}
.content i {
  position: absolute;
  top: 50px;
  right: 0;
  font-size: 50px;
}
.josn {
  width: 50%;
  top: 100px;
  position: absolute;
  right: 0;
  z-index: 2;
}
.txt {
  width: 50%;
  top: 100px;
  position: absolute;
  left: 0;
  z-index: 8;
}
.txt input {
  width: 589px;
  height: 30px;
  background: #011615;
  outline: none;
  border: 1px solid #fff;
  color: #fff;
  padding-left: 20px;
}
.block {
  text-align: center;
  margin-top: 30px;
}
.block .el-button {
  background: #0dc2c3;
}
</style>
